<template>
  <div class="llt-bmap">
    <div class="left" id="map"></div>
    <div class="left area-right">
      <div class="search">
        <div class="s-address">
          <el-input placeholder="请输入地名" v-model="address" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="doSearch(2)"></el-button>
          </el-input>
        </div>
      </div>
      <div id="result"></div>
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<script>
export default {
  name: "lltmap",
  data(){
    return{
      address:''
    }
  },
  mounted(){
    let _ = this;
    setTimeout(()=>{
      _.doSearch();
    },1000)
  },
  methods:{

    doSearch(param){
      /*if(param === 2){
        this.address = this.address + ' 浙商银行';
      }*/

      let markerArr = [];
      let _ = this;
      // 百度地图API功能
      let map = new BMap.Map("map");
      let loc = new BMap.LocalCity();
      window.openLMap = (url)=>{
        window.open(url);
      }

      window.handleSelect = (item,i)=> {
        var infos = '<div><div title='+item.title+' style="    white-space: nowrap;\n' +
            '    overflow: hidden;    margin-bottom: 2px;width: 210px;\n' +
            '    font: bold 14px/16px arial,sans-serif;\n' +
            '    margin: 0;\n' +
            '    color: #cc5522;\n' +
            '    white-space: nowrap;\n' +
            '    overflow: hidden;">'+item.title+
            "<a style='font-size: 12px;color: #3d6dcc;padding-left: 5px;\n" +
            "    font-weight: normal;' onclick='openLMap("+JSON.stringify(item.detailUrl)+")'>" +
            '详情</a></div>' +
            '<div title='+item.address+' style="font-size: 12px">地址：'+item.address+'</div>' +
            '<div style="font-size: 12px">电话：'+item.phoneNumber+'</div>' +
            '</div>'

        var info = new BMap.InfoWindow(infos);
        //利用在第一个问题中的markerArr数组设置触发函数，但注意数组的索引值不能用i，因为函数运行时i已不存在，因此在构造结果面板时，每个节点我添加了一个index属性，并用下面的代码获取，设置属性的代码类似于：<div id='poi5' index='5'></div>
        markerArr[i].openInfoWindow(info);
      }

      loc.get(function (result) {
        //map.centerAndZoom(result.center, 12);
        map.centerAndZoom(result.center, 11);
      });

      map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用

      //autoViewport检索结束后是否自动调整地图视野
      let local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});

      local.search(param!=2?'宁波银行':(_.address+'宁波银行'));

      //检索结束后的回调方法
      local.setSearchCompleteCallback(function(results){
        // 判断状态是否正确
        if (local.getStatus() == BMAP_STATUS_SUCCESS){
          let str = "<ul>";
          for (var i = 0; i < results.getCurrentNumPois(); i ++){
            var poi = results.getPoi(i);
            var ii = JSON.parse(JSON.stringify(poi));
            str+="<li onclick='handleSelect("+JSON.stringify(ii)+","+i+")'>";
            //str+='<li>';
            str+='<div class="res-data">';
            str+='<div class="left res-marker">';
            str+='<span>'+String.fromCharCode(65+i)+'</span>';
            str+='</div>';
            str+='<div class="left res-address">';
            str+='<div class="title">'+poi.title+'</div>';

            str+='<div>地址：<span class="rout">'+poi.address+'</span></div>';
            str+='<div>电话：<span class="rout">'+poi.phoneNumber+'</span></div>';
            str+='</div>';
            str+='<div class="clearfix"></div>';
            str+='</div>';
            str+='</li>';
          }
          str+='</ul>';
          document.getElementById('result').innerHTML = str;
        }
      });
      local.setMarkersSetCallback(function(pois){
        for(var i=0;i<pois.length;i++){
          markerArr[i]=pois[i].marker;
          pois[i].marker.addEventListener("infowindowopen", function(e){})
        }
      })

    }
  }
}
</script>

<style lang="scss">
.llt-bmap{
  .left{float:left;}
  .right{float:right;}
  .clearfix{clear: both;}
  .hide{display: none;}
  #map{height:628px;width: calc(100% - 305px);border: 1px solid #dadada;}
  #result{height: 520px; font-size: 13px; line-height: 20px;overflow: auto;color: #666;}
  #result ul {
    list-style: outside none none;
    padding-left: 10px;
  }
  #result ul li{
    border-bottom: 1px solid #dadada;
  }
  #result ul li:hover{
    background-color: #f0f0f0;
    cursor: pointer;
  }

  #result .res-marker{
    width: 30px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    color: #8b92da;
    font-weight: bold;
  }
  #result .res-address{
    width: 235px;
    text-align: left;
  }
  #result .title{
    font-size: 16px;
    color: #000000;
  }
  .area-right{
    width:303px;
  }
  .area-right .search{
    border-bottom: 1px solid #dadada;
    padding: 8px 0;
    box-shadow: 8px 8px 8px #888888;
    margin-bottom: 8px;
  }
  .area-right .search .s-address{
    margin-bottom: 5px;position: relative;border-bottom: 1px solid #DADADA;height: 32px;line-height: 32px;
    padding: 0 10px;
  }
  .area-right .search .s-address .btn{
    position: absolute;right: 10px;top: 5px;cursor: pointer;
  }
  .area-right .search .s-address .btn img{
    width: 22px;
  }
  .area-right .search .address{
    height: 28px;
    line-height: 28px;
    border: none;
    outline: medium;/*去掉鼠标点击后的边框*/
  }

  .area-right .search .cur_point{
    color: #1E90FF;padding: 0 10px;font-size: 13px;
  }
  .area-right .search .point{
    border:none;
  }
}
</style>
